<script setup>
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
onMounted(()=>{
  getall()
  getallminutesPage()
})
//表单新增弹框按钮
const addBtn=ref(false)
const meetingEdit=ref(false)
const UpdateMeetingRoomRef=ref()
const SearchMeetingMintuesRef=ref()
const SearchMeetingMintues=reactive({
  meetingtitle:'',
  meetingtime:'',
  status:'全部',
  size : '',
  currentPage : ''
})
const UpdateMeetingRoom =reactive({
  id:'',
  number:'',
  meetingtitle:'',
  host:'',
  content:'',
  meetingtime:'',
  recordtime:'',
  recorder:'',
  audiorecording:'',
  status:''
})
const AddMeetingRoomRef=ref()
const AddMeetingRoom = reactive({
  id:'',
  number:'',
  meetingtitle:'',
  host:'',
  content:'',
  meetingtime:'',
  recordtime:'',
  recorder:'',
  audiorecording:'',
  status:''
})
//分页的数据模型
const pageFormModel =reactive({
  total : '',
  size : '',
  currentPage : '',
  pages : ''
})
//分页的提交数据模型
const pageSubFormModel =reactive({
  size : '',
  currentPage : '',
})
//分页--------------------------------------------------
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  pageSubFormModel.size=val
  //alert(`${pageSubFormModel.size} 每页条目数`)
  getallminutesPage()
}
const handleCurrentChange = (val) => {
  pageSubFormModel.currentPage=val
  //alert(`当前页: ${pageSubFormModel.current}`)
  getallminutesPage()
}
//分页
const getallminutesPage = () => {
    request({
      url:'/systemdailyman/meetingminutes/getall',
      method:'get',
      params:pageSubFormModel
    }).then(req=>{
      if (200==req.data.errorCode){
        tableData.value=req.data.data.records
        pageFormModel.total = req.data.data.total
        pageFormModel.size = req.data.data.size
        pageFormModel.currentPage = req.data.data.currentPage
        pageFormModel.pages = req.data.data.pages
      }
    })
}
//表单校验规则
const SearchMeetingMintuesRules=reactive({
  status:[
    { required: true, message: '请选择预约状态', trigger: 'blur' },
  ]
})
const MeetingroomRules=reactive({
  number:[
    { required: true, message: '请输入会议编号', trigger: 'blur' },
    {max:11,min:11,message:'只能输入11个字符',trigger:'blur'},
  ],
  meetingtitle:[
    { required: true, message: '请输入会议题目', trigger: 'blur' },
  ],
  host:[
    { required: true, message: '请输入主持人', trigger: 'blur' },
    {max:5,message:'最多输入5个字符',trigger:'blur'},
  ],
  content:[
    {max:3000,message:'只能输入3000个字符',trigger:'blur'},
  ],
  recorder:[
    { required: true, message: '请输入记录人', trigger: 'blur' },
    {max:5,message:'最多输入5个字符',trigger:'blur'},
  ]
})
//表格数据
const tableData=ref([])
const tableDataRef=ref()
const getall = () => {
  request({
    url:'/systemdailyman/meetingminutes/getall',
    method:'get'
  }).then(req=>{
    tableData.value=req.data.data.records
    pageFormModel.total = req.data.data.total
    pageFormModel.size = req.data.data.size
    pageFormModel.currentPage = req.data.data.currentPage
    pageFormModel.pages = req.data.data.pages
  })
}
//查询按钮
const searchBtn = () => {
  SearchMeetingMintuesRef.value.validate((valid,fields)=>{
    if(valid){
      request({
        url:'/systemdailyman/meetingminutes/getallmeetingmintues',
        method:'get',
        params:SearchMeetingMintues
      }).then(req=>{
        if (200==req.data.errorCode){
          tableData.value=req.data.data.records
          pageFormModel.total = req.data.data.total
          pageFormModel.size = req.data.data.size
          pageFormModel.currentPage = req.data.data.currentPage
          pageFormModel.pages = req.data.data.pages
        }
      })
    }
  })
}
const updatemeeting = (rowIndex,rowData) => {
  UpdateMeetingRoom.id=rowData.id
  UpdateMeetingRoom.number=rowData.number
  UpdateMeetingRoom.meetingtitle=rowData.meetingtitle
  UpdateMeetingRoom.host=rowData.host
  UpdateMeetingRoom.content=rowData.content
  UpdateMeetingRoom.meetingtime=rowData.meetingtime
  UpdateMeetingRoom.recordtime=rowData.recordtime
  UpdateMeetingRoom.recorder=rowData.recorder
  UpdateMeetingRoom.audiorecording=rowData.audiorecording

  meetingEdit.value=true
}
//修改会议纪要提交按钮
const AddSubmit = () => {
  UpdateMeetingRoomRef.value.validate((valid,fielde)=>{
    if(valid){
      request({
        url: '/systemdailyman/meetingminutes/existmeetingtitle',
        method: 'GET',
        params: UpdateMeetingRoom
      }).then(req => {
        if (200 == req.data.errorCode) {
          ElMessage({
            type: 'error',
            message: '该会议的会议纪要已存在！'
          })
        } else {
          request({
            url:'http://localhost:8092/systemdailyman/meetingminutes/updatemeetingmintues',
            method:'put',
            headers:{'content-type':"application/json;charset:UTF-8"},
            data:UpdateMeetingRoom
          }).then(req=>{
            ElMessage({
              type: 'success',
              message: '修改成功！'
            })
            meetingEdit.value=false
            getall()
          })
        }
      })
    }
  })
}
//归档按钮
const updatestatus = (rowIndex,rowData) => {
  UpdateMeetingRoom.id=rowData.id
  ElMessageBox.confirm(
      '此会议归档后，不能再修改与会议相关的所有信息，是否继续？',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )  .then(() => {
    request({
      url:'http://localhost:8092/systemdailyman/meetingminutes/updatestatus',
      method:'put',
      headers:{'content-type':"application/json;charset:UTF-8"},
      data:UpdateMeetingRoom
    }).then(req=>{
      ElMessage({
        type: 'success',
        message: '操作成功！'
      })
      getall()
    })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消操作',
        })
      })
}
//新增按钮
const Submit = () => {
  AddMeetingRoomRef.value.validate((valid,fielde)=> {
    if (valid) {
      request({
        url: '/systemdailyman/meetingminutes/existmeetingtitle',
        method: 'GET',
        params: AddMeetingRoom
      }).then(req => {
        if (200 == req.data.errorCode) {
          ElMessage({
            type: 'error',
            message: '该会议的会议纪要已存在！'
          })
        } else {
          request({
            url: 'http://localhost:8092/systemdailyman/meetingminutes/addmeetingmintues',
            method: 'PUT',
            data: AddMeetingRoom,
            headers: {
              'content-type': "application/json;charset:UTF-8",
            }
          }).then(req => {
            if (200 == req.data.errorCode) {
              ElMessage({
                type: 'success',
                message: '新增成功！'
              })
              getall()
              //修改后关闭对话框
              addBtn.value=false
              //清空表单信息
              AddMeetingRoomRef.value.resetFields()

            }
          })
        }
      })
    }
  })
}
</script>

<template>
  <div class="bg">
    <el-form
        ref="SearchMeetingMintuesRef"
        :model="SearchMeetingMintues"
        :rules="SearchMeetingMintuesRules"
    >
      <el-row>
        <el-col :span="6" :offset="2">
          <el-form-item prop="meetingtitle" label="会议题目">
            <el-input v-model="SearchMeetingMintues.meetingtitle"  style="width: 180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item prop="meetingtime" label="开会时间">
            <el-date-picker
                v-model="SearchMeetingMintues.meetingtime"
                type="datetime"
                clearable
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item prop="status" label="状态">
            <el-select v-model="SearchMeetingMintues.status"  style="width: 180px" clearable>
            <el-option label="全部" value="全部"></el-option>
            <el-option label="已归档" value="1"></el-option>
            <el-option label="待归档" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" :offset="14">
          <el-button @click="searchBtn" type="primary">查询</el-button>
          <el-button @click="addBtn=true" type="primary">新增</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" ref="tableDataRef" stripe border style="height: 100%;width:1030px;margin-top: 10px" :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="id" label="编号" width="80"  v-if="false"/>
      <el-table-column prop="number" label="会议编号" width="130"  />
      <el-table-column prop="meetingtitle" label="会议题目" width="100"  />
      <el-table-column prop="host" label="主持人" width="100"  />
      <el-table-column prop="content" label="会议主要内容" width="150"  />
      <el-table-column prop="meetingtime" label="开会时间" width="100"  />
      <el-table-column prop="recordtime" label="记录时间" width="100"  />
      <el-table-column prop="recorder" label="记录人" width="100"  />
      <el-table-column prop="status" label="状态" width="100"  >
        <template #default="scope">
          <span v-if="scope.row.status=='1'" style="color: #4cae4c">已归档</span>
          <span v-if="scope.row.status=='0'" style="color: #007bff">待归档</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="primary"  :disabled="scope.row.status == '1'" size="small" @click="updatemeeting(scope.$index, scope.row)">修改</el-button>
          <el-button type="primary"  :disabled="scope.row.status == '1'" size="small" @click="updatestatus(scope.$index, scope.row)">归档</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination background
                   size="large"
                   style="margin-top: 30px;margin-left: 15%;"
                   v-model:current-page="pageFormModel.currentPage"
                   v-model:page-size="pageFormModel.size"
                   :page-sizes="[5,10]"
                   :disabled="disabled"
                   :background="background"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total=pageFormModel.total
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog
      v-model="meetingEdit"
      title="修改会议纪要"
      label-width="auto"
  >
    <el-form ref="UpdateMeetingRoomRef"
             :model="UpdateMeetingRoom"
             :rules="MeetingroomRules"
             label-width="auto"
             style="padding-left: 30%">
      <el-form-item prop="number" label="会议编号" >
        <el-input v-model="UpdateMeetingRoom.number" placeholder="请输入会议编号" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="meetingtitle" label="会议题目" >
        <el-input v-model="UpdateMeetingRoom.meetingtitle" placeholder="请输入会议题目" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="host" label="主持人" >
        <el-input v-model="UpdateMeetingRoom.host" placeholder="请输入主持人" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="content" label="主要内容" >
        <el-input v-model="UpdateMeetingRoom.content" type="textarea" placeholder="请输入主要内容" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="meetingtime" label="开会时间" >
        <el-date-picker
            v-model="UpdateMeetingRoom.meetingtime"
            type="datetime"
            clearable
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item prop="recordtime" label="记录时间" >
        <el-date-picker
            v-model="UpdateMeetingRoom.recordtime"
            type="datetime"
            clearable
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item prop="recorder" label="记录人" >
        <el-input v-model="UpdateMeetingRoom.recorder" placeholder="请输入记录人" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="audiorecording" label="会议录音" >
        <el-input v-model="UpdateMeetingRoom.audiorecording" placeholder="请输上传会议录音" style="width: 200px" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="AddSubmit" >提交</el-button>
  </el-dialog>
  <el-dialog
      v-model="addBtn"
      title="新增会议纪要"
  >
    <el-form
        ref="AddMeetingRoomRef"
        :model="AddMeetingRoom"
        :rules="MeetingroomRules"
        label-width="auto"
        style="padding-left: 30%"
    >
      <el-form-item prop="number" label="会议编号" >
        <el-input v-model="AddMeetingRoom.number" placeholder="请输入会议编号" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="meetingtitle" label="会议题目" >
        <el-input v-model="AddMeetingRoom.meetingtitle" placeholder="请输入会议题目" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="host" label="主持人" >
        <el-input v-model="AddMeetingRoom.host" placeholder="请输入主持人" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="content" label="主要内容" >
        <el-input v-model="AddMeetingRoom.content" type="textarea" placeholder="请输入主要内容" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="meetingtime" label="开会时间" >
        <el-date-picker
            v-model="AddMeetingRoom.meetingtime"
            type="datetime"
            clearable
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item prop="recordtime" label="记录时间" >
        <el-date-picker
            v-model="AddMeetingRoom.recordtime"
            type="datetime"
            clearable
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item prop="recorder" label="记录人" >
        <el-input v-model="AddMeetingRoom.recorder" placeholder="请输入记录人" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="audiorecording" label="会议录音" >
        <el-input v-model="AddMeetingRoom.audiorecording" placeholder="请输上传会议录音" style="width: 200px" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="Submit" >提交</el-button>
  </el-dialog>
</template>

<style scoped>
.bg{
  width: auto;
  margin-top: 50px;
  margin-left: 5%;
}
</style>